<template>
  <!--页面搭建-hw-->
  <layout-card v-model="search" :filters="ismapOptions" headline="信息列表" headtitle="数据筛选" :hasButton="true"
    @search-change="getData" @search-reset="searchReset">
    <template #action>
      <el-button type="primary" @click="exportDate('export')" :disabled="tabledata.length === 0">导出</el-button>

      <el-button type="primary" @click="handleCreate">新建</el-button>
    </template>
    <table-common stripe="true" :columns="mapListColumns" :pagination="pager" :table-data="tabledata" size="large"
      @current-change="changeCurrent" @size-change="changePageSize" :height="tableHeight">
      <template #action="{ row }">
        <!-- 自定义操作栏示例  -->
        <el-button class="link-btn" @click="handleEdit(row, true)" link type="primary">查看</el-button>
        <el-button class="link-btn" @click="handleEdit(row, false)" link type="primary">编辑</el-button>
        <el-popconfirm title="是否删除?" confirmButtonText="确定" cancelButtonText="取消" @confirm="() => DeletRow(row)">
          <template #reference>
            <el-button class="link-btn" link type="danger">删除</el-button>
          </template>
        </el-popconfirm>
      </template>
    </table-common>
  </layout-card>

  <!-- <map-control/> -->
  <Edit :visible="editVisible" :title="title" :sonData="sonData" :view="view" @cancel="cancel"></Edit>
</template>

<script lang="ts" setup>
import { computed, ref, onBeforeMount, reactive } from "vue";
import LayoutCard from "@/components/LayoutCard/index.vue";
import TableCommon from "@/components/TableCommon/index.vue";
import { mapListColumns } from "@/views/secure/archives/examineInfo/config/columns";
import { mapOptions } from "@/views/secure/archives/examineInfo/config/filters";
import Edit from './edit.vue';
import { examineInfoPageList, del, exportPageList } from "@/api/secure/examineInfo";
import { ElMessage } from "element-plus";

const ismapOptions = ref(mapOptions);
const editVisible = ref(false);// 弹出层状态
const title = ref('');         // 组件标题
const sonData = ref({})        // 回显数据
const view = ref(false);

// 分页和数据展示参数
const current = ref(1);
const pageSize = ref(10);
const total = ref(0);
const tabledata = ref([]);
const tableHeight = ref(window.innerHeight-400)
console.log(window.innerHeight)
const cancel = () => {
  getData();
  editVisible.value = false;
  title.value = ' ';
  sonData.value = { isNormal: '0' };
  view.value = false;
}

// 问题查询参数
const search = ref({
  unitNumber: null,
  unitName: null,
  rummager: null,
  examineState: null,
  examineName: null,
  creatTime: []
});

const pager = computed(() => ({
  currentPage: current.value,
  pageSize: pageSize.value,
  total: total.value,
  pageCount:
    Math.ceil(total.value / pageSize.value) === 0
      ? 1
      : Math.ceil(total.value / pageSize.value),
}));

const changeCurrent = (value: number) => {
  current.value = value;
  getData();
};
const changePageSize = (size: number) => {
  pageSize.value = size;
  getData();
};

// 获取数据
const getData = async () => {
  const searchList = {
    unitNumber: search.value?.unitNumber,
    unitName: search.value?.unitName,
    rummager: search.value?.rummager,
    examineState: getState(search.value),
    examineName: search.value?.examineName,
    creatTime: search.value.creatTime.length > 0 ? search.value?.creatTime[0] : '',
    endCreatTime: search.value.creatTime.length > 0 ? search.value?.creatTime[1] : ''
  };
  
  const playout = {
    page:{
      page: current.value-1,
      size: pageSize.value,
    },
    safetyInspe: {
      unitNumber:searchList.unitNumber,
      unitName:searchList.unitName,
      personRespo:searchList.rummager,
      rectificationStatus:searchList.examineState,
      recordName:searchList.examineName,
      entRecBin:'1'
    },
    myTime2:{
      startTime:searchList.creatTime,
      endTime:searchList.endCreatTime
    }
  };
  console.log('playout:'+playout);
  
  await examineInfoPageList(playout).then((res) => {
    console.log('res:', res);
    tabledata.value = res?.content;
    total.value = res?.content.length;
    console.log(tabledata);
  });
};
//获取状态(中文->数字)
const getState = (row:any) => {
  if(row.examineState=='全部')
    return ''
  else if(row.examineState=='正常')
   return 1
  else if(row.examineState=='待整改')
   return 2
  else if(row.examineState=='已整改')
   return 3
  else if(row.examineState=='无需整改')
   return 4
}
// 删除
const DeletRow = (row: any) => {
  console.log('del', row);
  del(row).then(res => {
    if (res) {
      ElMessage.success('删除成功');
      getData();
    }
  })
};

// 导出
const exportDate = (val: any) => {
  if (val === "export") {
    const date = new Date();
    const dateNumber =
      date.getFullYear() * 1e4 + (date.getMonth() + 1) * 1e2 + date.getDate();
    const searchList = {
      unitNumber: search.value?.unitNumber,
      unitName: search.value?.unitName,
      rummager: search.value?.rummager,
      rectifyState: search.value?.rectifyState,
      examineName: search.value?.examineName,
      creatTime: search.value.creatTime.length > 0 ? search.value?.creatTime[0] : '',
      endCreatTime: search.value.creatTime.length > 0 ? search.value?.creatTime[1] : '',
      pageNum: current.value,
      pageSize: pageSize.value,
    };
    // 导出
    exportPageList(searchList).then((res) => {
      const a = document.createElement("a");
      a.href = URL.createObjectURL(new Blob([res]));
      a.download = "安全培训记录管理" + dateNumber + ".xlsx";
      a.click();
    });
  }
};

// 新增
const handleCreate = (val: any) => {
  // 开启弹出层
  title.value = "新增";
  editVisible.value = true;
};

// 编辑
const handleEdit = async (row: any, state: boolean) => {
  // 开启弹出层
  editVisible.value = true;
  state == true ? title.value = "查看" : title.value = '编辑';
  sonData.value = row;
  view.value = state;
  console.log('son:'+sonData);
  
};

// 问题查询
const searchReset = () => {
  pager.value.currentPage = 1;
  pager.value.pageSize = 10;
  getData();
};

onBeforeMount(() => {
  getData();
});

</script>
<style scoped>
.form {
  .el-input {
    width: 150px;
  }
}
</style>
